<template>
  <div class="pug-radio-group pug-radio-group-outline pug-pro-field-radio-horizontal">
    <label class="pug-radio-wrapper" @click.prevent="selectItem(index)" :class="[index==currentIndex?'pug-radio-checked':'']"
           v-for="(item,index) in items"
           :key="index">
      <span class="pug-radio"><input type="radio" :id="cref" class="pug-radio-input" :value="item.value"/>
      <span class="pug-radio-inner"></span></span><span>{{ item.text }}</span>
    </label>
  </div>
</template>

<script>
export default {
  name: "PugRadio",
  data(){
    return {
      currentIndex:0
    }
  },
  props: {
    modelValue: String,
    cref:{
      type:String,
      default:""
    },
    selectIndex: {
      type: Number,
      default: 0
    },
    items: {
      type: Array,
      default: [{text: '男', value: 1}, {text: '女', value: 0}, {text: '保密', value: 2}]
    },
    isValue: {
      type: Boolean,
      default: false
    },
  },

  mounted() {
      setTimeout(() => {
        this.currentIndex = this.items.findIndex(item => item.value == this.modelValue);
        if(this.currentIndex == -1) {
          this.currentIndex = this.$props.selectIndex;
          this.$emit("update:modelValue",  this.$props.isValue ? this.items[this.$props.selectIndex].text : this.items[this.$props.selectIndex].value);
        }else {
          this.$emit("update:modelValue", this.$props.isValue ? this.items[this.currentIndex].text : this.items[this.currentIndex].value);
        }
      }, 300)
  },

  methods: {
    selectItem(index) {
      var selectItems = this.items[index];
      this.showvalue = selectItems.text;
      this.$props.selectIndex = index;
      this.currentIndex = index;
      this.$emit("update:modelValue", this.$props.isValue ? selectItems.text : selectItems.value);
      this.$emit("change", selectItems);
    }
  }
}
</script>

<style scoped>

</style>
